<!DOCTYPE html>
<!--
The list view shows calendar entries in a table. There are only two
columns with the category and the name. They are sorted by there date.
-->
<html>
    <head>
        <title>Calendar</title>
        <link rel="stylesheet" type="text/css" href="css/list_view.css">
        <link rel="stylesheet" type="text/css" href="css/form.css">
        <script type="text/javascript" src="js/storage.js"></script>
        <script type="text/javascript" src="js/form.js"></script>
        <script type="text/javascript" src="js/edit_form.js"></script>
        <script type="text/javascript" src="js/list.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body onload="initialize()">
        <div id="toolbar">
            Shown Categories:
            <p>
                <span id="shownCategories"></span>
            </p>
            <div id="legend">
                
            </div>
            <!-- Button to add a new event -->
            <input type="button" onclick="showForm()" value="Add a new Event" >
            <input type="button" onclick="manageCategories()" value="Manage Categories" >
        </div>
        
        <div id="list">
            <h3>List of Events</h3>
            <input type="button" onclick="firstPage()" value="first" >
            <input type="button" onclick="previousPage()" value="<<<" >
            Events per Page:
            <select onchange="eventsPerPageChanged(this)" id="eventsPerPage">
                <option value="5">5</option>
                <option selected="selected" value="10">10</option>
                <option value="20">20</option>
                <option value="10000">All</option>
            </select>
            Showing <span id="pageInfo">0 - 0 of 0</span>
            <input type="button" onclick="nextPage()" value=">>>" >
            <input type="button" onclick="lastPage()" value="last" >
            <div id="listBox">
                <table id="listContent">
                    <thead>
                        <tr>
                            <th>Category</th>
                            <th>Name</th>
                            <th class="dateColumn">Start Date</th>
                            <th class="dateColumn">End Date</th>
                            <th>Location</th>
                            <th>Organizer</th>
                            <th>Status</th>
                            <th>Allday</th>
                            <th>Webpage</th>
                            <th>Image</th>
                        </tr>

                    </thead>
                </table>
            </div>
        </div>
        
        <div id="categoryManager">
            <h1>Categories</h1>
            <table id="categoryManagerList">
                <thead>
                    <tr>
                        <th>Name</th>
                    </tr>
                </thead>
            </table>
            <input type="button" onclick="closeCategoryManager()" value="Close" >
        </div>
        
        <form id="form" onsubmit="submitData(); return false;">
            <div id="formTitle" >New</div>
            <div>
                <label for="title">Name:</label>
                <input type="text" required="required" placeholder="name" id="title" name="title"/>   
            </div>
            
            <div>
                <label for="location">Location</label> 
                <input type="text" required="required" placeholder="location" id="location" name="location"/>   
            </div>         
            
            
            <div>
                <label for="mail">Organizer:</label>
                <input type="email" required="required" placeholder="e-mail" id="mail" name="organizer"/>
            </div>    
            
            <div>
                <label for="webpage">Webpage: </label>
                <input type="url" placeholder="URL of Webpage" id="webpage" name="webpage"/>
            </div> 
            
            <div>
                <label for="allDay">All-day Event:</label>
                <input type="checkbox" onchange="allDayChanged(this)" id="allDay"/>
            </div>
            
            <div>
                <label for="startDate">Start (Date/Time):</label> 
                <input type="text" required="required" placeholder="YYYY-MM-DD" 
                       size="10" 
                       pattern="^([0-9]{1,4})[\-](0[1-9]|1[0-2])[\-](0[1-9]|[12][0-9]|3[01])$"
                       id="startDate"/>
                <input type="text" required="required" placeholder="HH:MM" 
                       size="5" pattern="^([01]?[0-9]|2[0-3]):([0-5][0-9])$" id="startTime" />
            </div>
            
            <div>
                <label for="endDate">End (Date/Time):</label>
                <input type="text" required="required" placeholder="YYYY-MM-DD"
                       size="10" 
                       pattern="^([0-9]{1,4})[\-](0[1-9]|1[0-2])[\-](0[1-9]|[12][0-9]|3[01])$"
                       id="endDate"/>
                <input type="text" required="required" placeholder="HH:MM" 
                       size="5" pattern="^([01]?[0-9]|2[0-3]):([0-5][0-9])$" id="endTime" />
            </div>
            
            <div>
                <label for="statusList">Status:</label>
                <select id="statusList" required="required">
                    <option id="Free" value="">Free</option>
                    <option id="Tentative" >Tentative</option>
                    <option id="Busy" >Busy</option>
                </select>
            </div>
            
            <div>
                <label for="categoryList">Category (multiple choice):</label>
                <select required="required" id="categoryList" multiple size="4" >
                </select>
                <input type="text" placeholder="category name" size ="13" pattern="^[\w]+$" id="newCategory" />
                <input type="button" value="create" onclick="createCategory()" />
            </div>
            
            <div>
                <label for="image">Image:</label>
                <input type="file" accept="image/jpeg, image/png" id="image" onchange="imgChanged(this)"/> 
                <br>
                <input type="button" onclick="removeImage()" value="remove Image" id="removeImg"/>
                <span id="imgURL"></span>

            </div>
            
                
            
            <!-- Button to submit/cancel -->
            <div>
                <input type="submit" value="submit"/>
                <input type="button" value="cancel" onclick="hideForm()" />
            </div>
        </form>  
        
    </body>
    
</html>
